<template>
  <div class="forget_container">
    <div class="forget_msg">忘记密码</div>
    <!--登录表单-->
    <el-form class="forget_form" ref="forgetFormRef" :rules="forgetRule" :model="forgetForm">
      <el-form-item prop="phoneNumber">
        <el-input placeholder="请输入电话号码" v-model="forgetForm.phoneNumber" clearable prefix-icon="iconfont icon-dianhua"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input placeholder="请输入邮箱" v-model="forgetForm.email" clearable prefix-icon="iconfont icon-xinxi"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!forgetForm.captchaClick" type="primary" @click="getCaptcha">获取验证码</el-button>
      </el-form-item>
      <!--<el-form-item>-->
        <!--<img :style="forgetForm.captchaStyle" :src="forgetForm.captchaUrl"/>-->
      <!--</el-form-item>-->
      <el-form-item prop="captcha">
        <el-input placeholder="请输入验证码" v-model="forgetForm.captcha" clearable prefix-icon="iconfont icon-tupian"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="forgetForm.password" show-password clearable prefix-icon="iconfont icon-tianchongxing-"></el-input>
      </el-form-item>
      <el-form-item prop="checkPassword">
        <el-input placeholder="请再次输入密码" v-model="forgetForm.checkPassword" show-password clearable prefix-icon="iconfont icon-tianchongxing-"></el-input>
      </el-form-item>
      <el-form-item class="forget_btn">
        <el-button type="primary" @click="onSubmit">立即找回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Enc } from '../../utils/secret'

export default {
  name: 'Forget',
  data () {
    var checkPassword = (rule, value, callback) => {
      if (value !== this.forgetForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      forgetForm: {
        email: '',
        phoneNumber: '',
        captcha: '',
        captchaUrl: '',
        captchaClick: true,
        captchaStyle: 'display: none; width: 100%; height: 50px',
        password: '',
        checkPassword: ''
      },
      forgetRule: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phoneNumber: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度为 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 24, message: '长度在 6 到 24 个字符', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async getCaptcha () {
      if (this.forgetForm.phoneNumber !== '' && this.forgetForm.email !== '' && this.forgetForm.captchaClick) {
        this.forgetForm.captchaClick = false
        setTimeout(() => { this.forgetForm.captchaClick = true }, 60000)
        // 取消页面验证码展示
        // this.forgetForm.captchaStyle = 'width:100%; height: 50px'
        // this.forgetForm.captchaUrl = '/ajshow/auth/captcha/236/50/' + this.forgetForm.email
        const { data: res } = await this.$http.post('/ajshow/auth/captcha/' + this.forgetForm.email + '/' + this.forgetForm.phoneNumber)
        if (!res.status) {
          return this.$message.error(res.msg ? res.msg : '获取验证码异常')
        }
        this.$message.success('验证码已发送至你的邮箱请注意查收')
      } else if (!this.forgetForm.captchaClick) { this.$message.warning('请勿重复点击') } else this.$message.warning('请检查邮箱、电话号码是否正确')
    },
    onSubmit () {
      this.$refs.forgetFormRef.validate(async valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '找回中',
            customClass: 'iconfont icon-jiazai2',
            background: 'rgba(0, 0, 0, .7)'
          })
          try {
            // 第一步获取密钥:参数加密传输
            const { data: enKey } = await this.$http.post('/ajshow/auth/getEncKey')
            if (!enKey.status) {
              loading.close()
              return this.$message.warning('初始化第一次连接')
            }
            const res = await this.$http.post('/ajshow/auth/forget',
              {
                email: Enc(this.forgetForm.email, enKey.data),
                captcha: Enc(this.forgetForm.captcha, enKey.data),
                password: Enc(this.forgetForm.password, enKey.data)
              })
            if (res.status === 200) {
              if (res.data.status) {
                this.$message.success('账号信息已发送至你的邮箱请注意查收')
                this.$router.push('/login')
              } else this.$message.warning(res.data.msg ? res.data.msg : '注册异常')
            } else this.$message.error('接口异常')
          } catch (e) {
            this.$message.error(e.toString())
          }
          loading.close()
        } else {
          this.$message.warning('校验失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .forget_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .forget_msg{
      color: white;
      font-size: 24px;
      padding-bottom: 60px;
    }
    .forget_form{
      padding: 50px;
      background-color: rgba(255,255,255,.6);
      .forget_btn{
        text-align: center;
      }
    }
  }
</style>
